<template>
	<div class="nav-bar" :class="{'is_fixed':isFix}">
		<div class="container">
			<div class="pro-title">{{title}}</div>
			<div class="pro-param">
				<a href="">概述</a><span>|</span>
				<a href="">参数</a><span>|</span>
				<a href="">用户评价</a>
				<slot name="buy"></slot>
			</div>
		</div>
	</div>
</template>

<script>
	export default{
		data(){
			return{
				isFix:false
			}
		},
		props:{
			title:String
		},
		mounted() {
			window.addEventListener('scroll',this.initHeight)
		},
		methods:{
			initHeight(){
				let scrolltop=window.pageYOffset;
				this.isFix=scrolltop>152? true:false;
			}
		},
		destroyed() {
			window.removeEventListener('scroll',this.initHeight,false)
		}
	}
</script>

<style lang="less">
	@import './../assets/css/mixin.less';
		.nav-bar{
			height: 70px;
			line-height: 70px;
			border-top: 1px solid #E5E5E5;
			text-align: center;
			background-color: #FFFFFF;
			box-shadow: 0 3px 5px #CCCCCC;
			z-index: 10;
			.container{
				width: 1226px;
				margin: 0 auto;
				.flex();
				.pro-title{
					font-size: 18px;
					color: #666;
				}
				.pro-param{
					span{
						margin: 0 10px;
					}
					a{
						font-size: 14px;
						color: #666;
					}
				}
			}
		}
		  .is_fixed{
			position: fixed;
			top: 0;
			width: 100%;
		}
</style>
